<template>
	<div>
		<deatil-banner :deatil='deatil'></deatil-banner>
		<div class="nav">
			<span
				v-for='(item,index) in Navlist' :key="index"
				:class="currentNav==index?'hover':''"
				@click='changeCurrentSwiper(index)'
			>
				{{ item }}
			</span>
		</div>
		<div class="warp">
			<swiper ref="mySwiper" @slideChangeTransitionEnd='changNav(swiper.activeIndex)'>
				<swiper-slide>
					<deatil-fenxi 
						:AgainstHistory='AgainstHistory' :tableList='tableList'
						:RecentAllHome='RecentAllHome' :RecentAllAway='RecentAllAway' 
						:HistoryMatchHome='HistoryMatchHome' :HistoryMatchAway='HistoryMatchAway'
						:LeagueTable='LeagueTable'
					></deatil-fenxi>
				</swiper-slide>
				 <swiper-slide>
				 	<deatil-wenzi :LiveText='LiveText'></deatil-wenzi>
				</swiper-slide>
				<swiper-slide>
					<deatil-shikuang :LiveDetail='LiveDetail'></deatil-shikuang>
				</swiper-slide>
				<swiper-slide>
					<deatil-tongji ></deatil-tongji>
				</swiper-slide>
				 <swiper-slide>
					<deatil-zhenrong :homeList='homeList' :awayList='awayList' :hEngName='hEngName' :aEngName='aEngName'></deatil-zhenrong>
				</swiper-slide>
			</swiper>
		</div>
	</div>	
</template>
<script>
import deatilBanner from './components/banner'
import deatilFenxi from './components/fenxi'
import deatilWenzi from './components/Wenzi'
import deatilShikuang from './components/Shikuang'
import deatilTongji from './components/Tongji'
import deatilZhenrong from './components/Zhenrong'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'Deatil',
	components:{
		deatilBanner,
		deatilFenxi,
		deatilWenzi,
		deatilShikuang,
		deatilTongji,
		deatilZhenrong,
	},
	data:function(){
		return {
			currentNav:0,
			Navlist:['分析','文字','实况','统计','阵容'],
			deatil:{},
			AgainstHistory:{},
			tableList:new Array,
			RecentAllHome:{},
			RecentAllAway:{},
			LeagueTable:[],
			LiveText:new Array,
			LiveDetail:new Array,
			HistoryMatchHome:{},
			HistoryMatchAway:{},
			homeList:[],
			awayList:[],
			hEngName:'',
			aEngName:'',
		}
	},
	computed: {
		swiper() {
	        return this.$refs.mySwiper.swiper
	   	}
	},
	methods:{
		//banner信息
		getHomeInfo:function(id){
			var t = this;
			axios.get('/api/getZQMatchDetail.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.deatil = data
						t.hEngName = data.h
						t.aEngName = data.a
					}else{
						Toast(res.message)
						t.deatil = ''
					}
				})
				.catch(function (error) {
				    console.log(error);
				  });
		},
		//交战历史
		getAgainstHistory:function(id) {
			var t = this;
			axios.get('/api/getAgainstHistory.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.AgainstHistory = data
						if (data.zj.length > 0) {
							t.tableList = data.zj
						}
					}else{
						Toast(res.message)
						t.AgainstHistory = ''
					}
				})
				.catch(function (error) {
				    console.log(error);
				  });
		},
		//近期战绩
		getRecentAll:function(id) {
			var t = this;
			axios.get('/api/getRecentAll.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.RecentAllHome = data.home
						t.RecentAllAway = data.away
					}else{
						Toast(res.message)
						t.RecentAllHome =''
						t.RecentAllAway =''
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		//赛前积分
		getLeagueTable:function(id){
			var t = this;
			axios.get('/api/getLeagueTable.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.LeagueTable = data.length > 0?data:new Array
					}else{
						Toast(res.message)
						t.LeagueTable=new Array;
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		//文字直播内容
		getLiveText:function(id){
			var t = this;
			axios.get('/api/getLiveText.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.LiveText = data.length>0?data:[];
					}else{
						Toast(res.message)
						t.LiveText =[]
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		//比赛实况 
		getLiveDetail:function(id){
			var t = this;
			axios.get('/api/getLiveDetail.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						t.LiveDetail = data.length>0?data:[];
					}else{
						Toast(res.message)
						t.LiveDetail =[]
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		//比赛阵容
		getMatchLineup:function(id){
			var t = this;
			axios.get('/api/getMatchLineup.php?id='+id)
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						let homeLists = [],awayLists = []
						if (data.lineup.length>0) {
							data.lineup.forEach(function(item,index){
								if (item.side == 1) {
									homeLists.push(item)
								}
								if (item.side == 2) {
									awayLists.push(item)
								}
							})
							t.homeList = homeLists
							t.awayList = awayLists
						}
					}else{
						Toast(res.message)
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		changeCurrentSwiper(index){
			var id = this.$route.params.id;
			this.currentNav = index;
			this.swiper.slideTo(index, 1000, false)
			// if (index == 2) {//文字直播
			// 	if (this.LiveText.length == 0) {
			// 		this.getLiveText(id)
			// 	}
			// }
			// if (index == 3) {//实况
			// 	if (this.LiveDetail.length == 0) {
			// 		this.getLiveDetail(id)
			// 	}
			// }
			// if (index == 5) {//阵容
			// 	if (this.homeList.length == 0&&this.awayList.length == 0) {
			// 		this.getMatchLineup(id)
			// 	}
			// }
		},
		changNav(index){
			this.currentNav = index
			this.swiper.slideTo(index, 1000, false)
			var id = this.$route.params.id;
			// if (index == 2) {//文字直播
			// 	if (this.LiveText.length == 0) {
			// 		this.getLiveText(id)
			// 	}
			// }
			// if (index == 3) {//实况
			// 	if (this.LiveDetail.length == 0) {
			// 		this.getLiveDetail(id)
			// 	}
			// }
			// if (index == 5) {//阵容
			// 	if (this.homeList.length == 0&&this.awayList.length == 0) {
			// 		this.getMatchLineup(id)
			// 	}
			// }
		},

	},
	created() {
		var id = this.$route.params.id;
		this.getHomeInfo(id)
		this.getAgainstHistory(id)
		this.getRecentAll(id)
		this.getLeagueTable(id)
		this.getLiveDetail(id)
		this.getMatchLineup(id)
		sessionStorage.setItem('zqIngId',id);
	},
	mounted () {
	},
};
</script>
<style lang="less" scoped>
	@import 'swiper/dist/css/swiper.min.css';
	@import '~styles/varibles.less';
	.nav{
		position: fixed;
		left: 0;
		right: 0;
		top: 4.8rem;
		z-index:100;
		background-color: @bggray;
		display: flex;
		justify-content: space-between;
		text-align: center;
		span{
			flex: 1;
			height: .7rem;
			line-height: .7rem;
			border-bottom: .04rem @bggray solid;
			&.hover{
				font-weight: bold;
				border-bottom:.04rem @greenColor1 solid;
			}
		}
	}
	.warp{
		position: absolute;
		left: 0;
		right: 0;
		top:5.8rem;
		bottom:0;
	}
	.swiper-wrapper,.swiper-container{
		height: 100%;
	}
	.swiper-slide{
		height: 100%;
		overflow: scroll;
	}
</style>
